<!-- Created by mhy on 2018/6/27.

 -->
<style scoped lang="scss">
    .frame-index{
        position: relative;
        width: 100%; overflow: hidden;
        background:#F2F2F2;
    }
    input{
      background-color: white;
    }
    .u-wrap{
        position: relative;
        display: flex;
        margin: 70px auto 0 auto;
    }

    .u-detail{
        position: relative;
        flex: 1;
        background: #fff;
    }

    .u-vip-box{
        position: relative;
        width: 30%;
    }

    .u-header{
        height: 94px;
        position: relative;
        border-bottom: 2px solid rgba(151, 151, 151, 1);
    }

    .u-name{
        position: absolute;
        left: 50px; top: 36px;
        height:40px;
        font-size:28px;
        color:rgba(48,54,65,1);
        line-height:40px;
    }

    .u-btn{
        position: absolute;
        width:80px;
        height:37px;
        top: 33px; right: 50px;
        background:rgba(255,82,62,1);
        border-radius:5px;
        color: #fff;
        font-size:12px;
        text-align: center;
        line-height: 37px;
    }

    .u-body{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 0 50px;
        min-width: 750px;
        overflow: hidden;
        padding-bottom: 356px;
    }

    .u-block{
        position: relative;
        height: 106px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-regist{
        position: absolute;
        left: 0; top: 50px;
        height: 37px; line-height: 37px;
        color: #303641;
        font-size: 26px;
    }

    .u-red{
        color: #FF523E;
    }

    button{
        cursor: pointer;
    }

    .u-item-block{
        position: relative;
        height: 129px;
        font-size: 16px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-item-label{
        position: absolute;
        left: 0; top: 30px;
    }

    .u-item-text{
        position: absolute;
        right: 0; top: 30px;
    }

    .u-vip-update{
        position: absolute;
        left: 0; top: 82px;
        color: #F5A623;
    }

    .u-pass-btn{
        position: absolute;
        line-height: 30px; text-align: center;
        width:60px;
        height:30px;
        background:rgba(2,187,0,1);
        border-radius:5px;
        color: #fff;
        bottom: 23px; right: 70px;
    }

    .u-refuse-btn{
       @extend .u-pass-btn;
       background: #F5A623; right: 0;
    }

    .u-btn-black{
        @extend .u-btn;
        color: #fff;
        background: #000;
    }

    .c-title{
        position: relative;
        height: 80px;
        background:rgba(242,242,242,1);
    }

    .u-vip-wrap{
        position: relative;
        width: 88.57142857142857%;
        margin: 0 auto;
    }

    .u-vip-title{
        height: 94px;
        line-height: 94px;
        text-align: center;
        border-bottom: 2px solid rgba(151,151,151,1);
        color:rgba(48,54,65,1);
        font-size:20px;
        margin-bottom: 28px;
    }

    .u-vip-item{
        position: relative;
        height:109px;
        box-shadow:0px 1px 2px 0px rgba(0,0,0,0.04);
        border-radius:3px;
        margin-bottom: 13px;
        background: #fff;
    }

    .u-vip-logo{
        position: absolute;
        width: 37px; height: 37px;
        left: 13px; top: 18px;
    }

    .u-vip-dec{
        position: absolute;
        left: 62px; top: 18px;
        color:rgba(85,85,85,1);
        font-size:12px; line-height: 1;
    }

    .u-vip-type{
        position: absolute;
        left: 62px; top: 33px;
        color:rgba(17,17,17,1);
        height:30px; line-height: 30px;
        font-size:22px;
    }

    .u-vip-price{
        position: absolute;
        left: 62px; bottom: 7px;
        color:rgba(136,136,136,1);
        font-size:12px; line-height: 1;
    }

    .u-vip-date{
        position: absolute;
        right: 14px; bottom: 7px;
        color:rgba(136,136,136,1);
        font-size:12px; line-height: 1;
    }

    .u-detail-center{
        width: 71%; margin: 0 auto;
        min-width: 850px;
        flex: none;
    }

</style>

<template>
    <div class="frame-index">
        <el-dialog
            v-loading="loading"
            title="提示"
            top="15%"
            append-to-body
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-input
                placeholder="请输入内容"
                v-model="content"
                clearable>
            </el-input>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateData">确 定</el-button>
            </span>
        </el-dialog>

        <div class="u-wrap">
            <div class="u-detail u-detail-center">
                <div class="u-header">
                    <div class="u-name">{{factoryData.name}}</div>
                    <!-- <button class="u-btn" @click="addBlackList">加入黑名单</button>
                    <button class="u-btn-black" @click="removeBlackList">解除黑名单</button> -->
                </div>

                <div class="u-body">
                    <UheadItem :imgurl="factoryData.icon"/>
                    <Uitem label="厂家名称" :text="factoryData.name">
                        <button slot="label" @click="update('name')">修改</button>
                    </Uitem>
                    <Uitem label="厂家ID" :text="$route.query.id"/>
                    <Uitem label="备注" :text="dataInfo.desc">
                        <button slot="label" @click="update('desc')">修改</button>
                    </Uitem>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    import UheadItem from '../../components/user/u-head-item.vue'
    import Uitem from '../../components/user/u-item.vue'
    export default {
        data () {
            return {
                vipRecord: false,
                centerDialogVisible: false,
                content: '',
                dataInfo: {},
                type: '',
                loading: false,
                show: true
            }
        },
        computed: {
            ...mapState({
                factoryData: state => state.factory.factoryData
            })
        },
        components: {
            UheadItem,
            Uitem
        },
        mounted () {
          this.$store.state.navTitle = '厂家详情'
            this.getFactoryData(this.$route.query.id)
            .then(data => {
              this.dataInfo = JSON.parse(data.result.info)
            })
        },
        methods: {
            ...mapActions([
                'updateFactoryData',
                'getFactoryData',
              'getALLFactoryList'
            ]),
            addBlackList () {
                this.$xalert.open({
                    title: '确定将“画水彩的小伙子”加入黑名单吗？',
                    btnColor: 'rgba(255,82,62,1)',
                    btnText: '加入黑名单',
                    success: () => {
                        alert(document.body.offsetHeight)
                        this.$xalert.close()
                    }
                })
            },
            removeBlackList () {
                this.$xalert.open({
                    title: '确定将“画水彩的小伙子”解除黑名单吗？',
                    btnColor: '#000',
                    btnText: '解除黑名单',
                    success: () => {
                        alert(document.body.offsetHeight)
                        this.$xalert.close()
                    }
                })
            },
            update (type) {
                this.content = ''
                this.centerDialogVisible = true
                this.type = type
            },
            updateData () {
                this.loading = true
//                this.dataInfo = {...this.factoryData}
//                this.dataInfo[this.type] = this.content
                var data = {}
                if(this.type == 'name'){
                  data = {
                    action: 'update',
                    id: this.$route.query.id,
                    name: this.content,
                    displayname: this.content
                  }
                }else if (this.type == 'desc'){
                  data = {
                    action: 'update',
                    id: this.$route.query.id,
                    info: JSON.stringify({desc:this.content})
                  }
                }
                this.updateFactoryData(data)
                .then(data => {
                    this.centerDialogVisible = false
                  this.getALLFactoryList({page: 1})
                    this.$dialog.toast({
                        mes: '修改成功',
                        timeout: 2000,
                        icon: 'success',
                        callback: () => {
                            this.getFactoryData(this.$route.query.id)
                            .then(data => {
                                this.dataInfo = JSON.parse(data.result.info)
                            })
                        }
                    })

                })
                .finally(() => {
                    this.loading = false
                })
            }
        }
    }
</script>
